<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<!-- 后台管理页面的用户管理页面 -->
<title>用户列表</title>
<%@include file="/WEB-INF/jsp/common/top_resources.jsp"%>
</head>
<body class=" theme-blue">
		<%@include file="/WEB-INF/jsp/common/top_left.jsp"%>
		<!-- 以下部分是页面独立内容-->
		<div class="content container-fluid">
			<div class="header">

				<h1 class="page-title">用户列表</h1>
				<ul class="breadcrumb">
					<li>
						<a href="index.html">用户管理</a>
					</li>
					<li class="active">用户列表</li>
				</ul>

			</div>
			<div class="main-content">

				<div class="btn-toolbar list-toolbar">
					<button class="btn btn-primary" data-toggle="modal" data-target="#createModal"><i class="fa fa-plus"></i>添加用戶</button>
					<!--<button class="btn btn-default">批量刪除</button>-->
					<div class="btn-group">
					</div>
				</div>
				<table id="showtable" class="table">
					<thead>
						<tr>
							<th>用戶id</th>
							<th>用戶名</th>
							<th>昵称</th>
							<th>性別</th>
							<th>邮箱</th>
							<th>注册日期</th>
							<th>黑名单</th>
							<th>角色类型</th>
							<!--style="width: 3.5em;"-->
							<th >用户操作</th>							
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
				<div id="pager" class="center-block">
					<ul class="pagination">
					</ul>
				</div>		
				<!--消息提醒的模态框-->
				<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								<h3 id="myModalLabel">删除消息</h3>
							</div>
							<div class="modal-body">
								<p class="error-text"><i class="fa fa-warning modal-icon"></i>你确认要删除该用户吗？<br>该操作无法撤销</p>
							</div>
							<div class="modal-footer">
								<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
								<button class="btn btn-danger"  id='deleteUser'>删除</button>
							</div>
						</div>
					</div>
				</div>
				<!--添加用户模态框-->
				<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">增加用户</h4>
							</div>
							<div class="modal-body">
								<form id="validateForm" class="form-horizontal" enctype="multipart/form-data">
									<div class="form-group">
										<label for="name" class="control-label col-lg-4">用户名:</label>
										<div class="col-lg-8">
											<input type="text" id="name" name="name" placeholder="请输入用户名" class="form-control">
										</div>
									</div>
									<!-- /.form-group -->
								
									<div class="form-group">
										<label for="pass" class="control-label col-lg-4">密码:</label>
								
										<div class="col-lg-8">
											<input class="form-control" type="password" placeholder="请输入密码" name="pwd" />
								
										</div>
									</div>
									<!-- /.form-group -->
								
									<div class="form-group">
										<label class="control-label col-lg-4">再次确认:</label>
								
										<div class="col-lg-8">
											<input type="password" name="rpwd" placeholder="请重复输入密码" class="form-control">
										</div>
									</div>
									<!-- /.form-group -->
								
									<div class="form-group">
										<label class="control-label col-lg-4">邮箱:</label>
								
										<div class="col-lg-8">
											<input type="text" name="email" placeholder="请输入邮箱" class="form-control">
										</div>
									</div>
									<!-- /.form-group -->
								
									<div class="form-group">
										<label for="text2" class="control-label col-lg-4">昵称:</label>
								
										<div class="col-lg-8">
											<input type="text" name="nickName" placeholder="请输入昵称" class="form-control">
										</div>
									</div>
									<div class="form-group">
										<label for="sex" class="control-label col-lg-4">性别:</label>
										<div class="col-lg-8">
								
											<label class="radio-inline">
								<input type="radio" name="sex" value="1" checked="true" />男
								</label>
											<label class="radio-inline">
								<input type="radio" name="sex" value="0" />女
								</label>
										</div>
									</div>
									
								<div class="form-group"> 
									<label class="control-label col-lg-4">角色类型</label>
									<div class="col-lg-4">
										<select name="roleID" id="sport" class="validate[required] form-control" style="">
											<option value="1">超级管理员</option>
											<option value="2">评审员</option>
											<option value="3">普通用户</option>
										</select>
									</div>
								</div>
                    
									<div class="form-group">
										<label class="control-label col-lg-4">头像:</label>
										<div class="col-lg-8">
											<input id="file-0a" class="file" type="file" name="file" multiple data-min-file-count="1">
										</div>
									</div>
									<!-- /.form-group -->
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-toggle="modal"  data-dismiss="modal" >取消</button>
								<button type="button" class="btn btn-primary" data-toggle="modal" id="add">添加</button>
							</div>
						</div>
					</div>
				</div>
				<footer>
					<hr>

					<p class="pull-right">Collect from
						<a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
					</p>
					<p>© 2014
						<a href="#" target="_blank">Portnine</a>
					</p>
				</footer>
			</div>
		</div>
		<!-- 页面独立内容结束 -->
		<%@include file="/WEB-INF/jsp/common/right.jsp"%>
	<!-- foot -->
	<%@include file="/WEB-INF/jsp/common/foot.jsp"%>
	<!-- 底部资源 -->
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
	
	<script type="text/javascript" src="${_root}/resources/js/jsp/admin/index.js"></script>
	<script type="text/javascript">
		//全局数据
		const globalData={
			url:"${_root}/user/userList",
			current:1,//当前页
			size:10,//每页大小
			totals:0,//总记录数
			pages:1	//总页数
		};
			$(function(){
				//定义table显示数据的模板
				const template="<tr data-uid='\${id}'>"+
				"<td>\${id}</td>"+
				"<td>\${name}</td>"+
				"<td>\${nickName}</td>"+
				"<td>\${sex}</td>"+
				"<td>\${email}</td>"+
				"<td>\${tdate}</td>"+
				"<td data-uid='\${id}'>\${exist}</td>"+
				"<td>\${roleID}</td>"+
				"<td><a href=\"#myModal\" role=\"button\" data-toggle=\"modal\" data-uid='\${id}' ><i class=\"fa fa-trash-o\"></i></a></td>"+
				"</tr>";
				$.template("list",template);//注册模板
				getServerData(globalData.url,globalData.current,globalData.size);//获取服务器数据
				//为添加用户模态框的添加按钮添加事件，当点击确认时验证表单然后提交数据
				$('#add').bind('click',function(){
					//点击提交时进行表单验证
					 $('#validateForm').formValidation('validate');
				});
				//消息模态框展示时触发事件
				$('#myModal').on('show.bs.modal', function (event) {
					 var button = $(event.relatedTarget);//获取触发按钮
					 var uid=button.data('uid');//获取用户id
					 $('#deleteUser').data('uid',uid);//为模态框删除按钮添加数据
				});
				//为删除按钮添加事件处理,
				$('#deleteUser').bind('click',function(){
					var uid=$(this).data('uid');
					const baseUrl=window._root+"/adminajax/deleteuser";
					const setting={
							type:'POST',
							dataType:'json',
							data:{'uid':uid},
							success:function(){
								$('#myModal').modal('hide');//隐藏模态框
								console.log('删除成功');
								getServerData(globalData.url,globalData.current,globalData.size);//刷新页面数据
							},
							error:function(){
								$('#myModal').modal('hide');//隐藏模态框
								console.log('未知错误');
							}
					};
					$.ajax(baseUrl,setting);
				});
			});
			
		</script>
		<!-- 自定义js代码 -->
	
</body>
</html>
